<template>
	<div class="index">
    <!--头部 start-->
		<div class="sreePublic">
			<div style="text-align: center;">
				<em class="iconfont" @click="vfun_back">&#xe61f;</em>
			</div>
			商品详情
			<div class="title-em"  @click="extendBtn">
				<em class="iconfont">&#xe6bb;</em>
			</div>
		</div>
    <!--头部 end-->
    <!--商品显示  start-->
    <div>
			<div class="section">
				<mt-swipe :auto="4500">
					<mt-swipe-item v-for="item in saleGoodsViewVo.basicFileVoList">
						<img :src="item.fileUrl" width="100%" height="100%">
					</mt-swipe-item>
				</mt-swipe>
			</div>
			<div class="goods-text">
				<p class="goods-th">{{saleGoodsViewVo.goodsName}}</p>
				<span class="goodsCode">{{saleGoodsViewVo.goodsCode}}</span>
				<div class="goods-pice">
					<span>￥{{saleGoodsViewVo.goodsSalePrice}}</span><span>库存：{{saleGoodsViewVo.goodsNum}}</span>
				</div>
				<div class="goods-guige">
					{{saleGoodsViewVo.goodsSkuValue}}
				</div>
			</div>
		</div>
    <!--商品显示  end-->
    <!--商品介绍、售后保障  start-->
		<div class="goodsDesc-box">
      <div style="border-bottom: 1px solid #ccc;  height: 1rem;line-height: 1rem;">
        <div @click="vue_select=true" class="goodsDesTxt" ><span :class="{activeRed:vue_select}">商品介绍</span></div>
        <div @click="vue_select=false" class="goodsDesTxt"><span :class="{activeRed:vue_select==false}">售后保障</span></div>
      </div>
      <div v-if="vue_select">
        <div class="goodsDesc" v-html="saleGoodsViewVo.goodsDesc"></div>
      </div>
      <div v-else>
        <div class="goodsDesc" v-html="saleGoodsViewVo.goodsDesc1"></div>
      </div>
		</div>
    <!--商品介绍、售后保障  end-->
    <!--商品详情底部（菜单） start-->
		<div class="footer">
			<div class="foot-chlid">
				<div class="foot-left">
					<div @click="vfun_im"><em class="iconfont">&#xe60b;</em>联系</div>
					<div :class="{activeConllect:vue_bb}" @click="vue_isCollected"><em class="iconfont">&#xe631;</em>{{vue_collect}}</div>
					<div @click="vfun_goodsCall"><em class="iconfont badge">&#xe65d;<i v-show="vue_badge_num!=0">{{vue_badge_num | badge}}</i></em>购物车</div>
				</div>
        <div class="foot-mid" v-show="saleGoodsViewVo.isAgented == false" @click="spread_btn">
          我要推广
        </div>
				<div class="foot-right" @click="popupVisible=true">
					加入购物车
				</div>
			</div>
		</div>
    <!--商品详情底部（菜单） end-->
		<!--选择规格  start-->
		<mt-popup v-model="popupVisible" position="bottom">

			<div class="guige">
				<div>
					<div class="guige-top">
						<em class="iconfont guigeon" @click="popupVisible=false">&#xe62d;</em>
						<div class="top-img">
							<img :src="saleGoodsViewVo.goodsBigPic" />
							<div>
								<span>￥{{saleGoodsViewVo.goodsSalePrice}}</span>
								<p>商品编码：{{saleGoodsViewVo.goodsCode}}</p>
							</div>
						</div>
					</div>
					<div class="guige-xunze">
						<div v-for="(sku,key) in saleGoodsSet.sumInfo.skuMap">
							<h1>{{key}}</h1>
							<a :class="{active:vfun_isSelected(key,item.valueName)&&!vfun_isSkuExit(item.exist),activehui:vfun_isSkuExit(item.exist)}" v-for="item in sku" @click="queryDataBySku(key,item.valueName,vfun_isSelected(key,item.valueName),vfun_isSkuExit(item.exist))">{{item.valueName}}</a>
						</div>
						<div style="margin-top: 0.8rem!important;position: relative;">
							<span>数量</span>
							<div style="position: absolute;top: -0.2rem;right: 0;">
								<el-input-number v-model="goodsNum" :min="1" :max="100">
								</el-input-number>
								<span style="color: #999;font-size:12px ;">{{saleGoodsViewVo.goodsNumUnit}}</span>
							</div>
						</div>
					</div>
					<div class="guige-ok" @click="save">
						确定
					</div>
				</div>
			</div>
		</mt-popup>
		<!--选择规格 end-->
    <!--分享弹出框  start-->
    <share-out @closeShowBtn="closeShow_share" v-show="shareShow" :closeShare="shareShow"></share-out>
    <!--分享弹出框  end-->
	</div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
	import { Toast } from 'mint-ui'; //引入弹框
  import shareOut from '../../components/share/share';

	export default {
		name: 'index',
    components:{shareOut},     //分享组件
		data() {
			return {
        vue_select:true,   //显示（商品介绍）或（售后保障）的判断条件
        shareShow:false,   //判断二维码弹出框
        isAgented:false,   //判断是否显示推广按钮
        popupVisible: false,     //选择规格的弹框（是否显示）的判断条件
        vue_collect: '关注',  //关注的默认文本
        vue_bb: false,    //（关注）的样式显示与否
        goodsNum: 1,   //规格弹框中，默认商品数量
        goodsCode: '',   //存储上个页面带过来的goodsCode（本地存储）
        //规格弹框（数据列表）
        saleGoodsSet: {
          "list": [], //数据列表(list[0]代表当前商品)
          "page": {}, //分页数据
          "sumInfo": {}, //汇总信息
        },
        saleGoodsViewVo: {}, //商品数据
        vue_badge_num:0,  //购物车数量显示
        BasicMemberAndMemberOperatorData:{},      //会员信息
			}
		},
		filters:{
			badge:function(val){        //购物车数量显示
				return val>99?'99+':val;
			}
		},
		methods: {

		  //（点击）推广按钮
      spread_btn(){
        if(localStorage.getItem("memberCode") == null){
          this.$router.push({path:"/landing"})
        }else{
          this.axios({
            method: 'post',
            url: "/v3/sale/goodss/saveAgentGoods",
            data: {
              "goodsCode":localStorage.getItem("goodsCode"),
              "memberCode":localStorage.getItem("memberCode"),
            }
          }).then((res) => {
            this.goodsDetails();
            MessageBox({
              title: '提示',
              message: '商品已上架到店铺！',
              confirmButtonText:'分享',
              cancelButtonText:'确认',
              confirmButtonClass:'redBg',
              showCancelButton: true
            }).then(btnType=>{
              if(btnType=='confirm'){
                this.shareShow = true;
              }
            })
          }).catch((err) => {
            Toast({
              message: err.response.data,
              iconClass: 'fontSize iconfont icon-shibai'
            });
          });
        }
      },

      //购物车数量查询
			vFun_badge_cart() {
				if (localStorage.getItem("memberCode") != null) { //只有登录之后，才查询
					this.axios({
						method:"POST",
						url:"/v3/sale/cartGoodss/listAll",
						data:{}
					}).then((res)=>{
						this.vue_badge_num=res.data.list.reduce((countNum,item)=>{
							return countNum+item.goodsBuyNum
						},0)
					}).catch((err)=>{
					})
				}
			},

      //查询是否开通客服
			vfun_im() {
				this.axios({
           method:"GET",
           url:"v3/custom/accounts/00000000",
           data:{},
        }).then((res) =>{
            var sysNum = res.data.accountKey;
            var zhichiUrl = "https://www.sobot.com/chat/h5/index.html?sysNum="+sysNum;
					/*设置用户信息*/
					if(this.BasicMemberAndMemberOperatorData.memberName == ""||this.BasicMemberAndMemberOperatorData.memberName==undefined){
						zhichiUrl+="&uname=游客";//昵称
					}else{
						zhichiUrl+="&tel="+this.BasicMemberAndMemberOperatorData.operatorPhone;//电话或手机
						zhichiUrl+="&email="+this.BasicMemberAndMemberOperatorData.operatorEmail;//邮箱
						zhichiUrl+="&uname="+this.BasicMemberAndMemberOperatorData.memberName;//昵称
						zhichiUrl+="&face="+this.BasicMemberAndMemberOperatorData.operatorPortraitUrl;//头像URL
						zhichiUrl+="&realname="+this.BasicMemberAndMemberOperatorData.memberName;//真实姓名
						zhichiUrl+="&weibo=";//微博账号
						zhichiUrl+="&weixin=";//微信账号
						zhichiUrl+="&qq="+this.BasicMemberAndMemberOperatorData.operatorQq;//QQ号
						zhichiUrl+="&sex=";//0 女 1 男
						zhichiUrl+="&birthday=";//生日，如“1990-01-01”
						zhichiUrl+="&remark=";//用户的备注信息
					}

					/*设置title信息*/
						zhichiUrl+="&back=2";//设置back=1时，显示title
						zhichiUrl+="&titleFlag=3";//设置页面title的显示内容，有效值1、2、3；1 显示console后台设置的企业名称（默认），2 显示传入的固定文案1-30字符，3显示当前客服昵称（机器人昵称、人工客服昵称）
						zhichiUrl+="&customTtile='咨询客服'";//当titleFlag=2时，通过此参数设置固定文案内容，1-30字符

					/*设置商品信息*/
						zhichiUrl+="&title_info="+this.saleGoodsViewVo.goodsName;
						zhichiUrl+="&url_info="+window.location.host;
						zhichiUrl+="&abstract_info="+this.saleGoodsViewVo.goodsSkuValue;
						zhichiUrl+="&label_info="+this.saleGoodsViewVo.goodsSalePrice;
						zhichiUrl+="&thumbnail_info="+this.saleGoodsViewVo.goodsBigPic;
					window.location.href = zhichiUrl;
				}).catch((err) =>{
					this.axios({
						method: "GET",
						url: "/v3/member/operators?operatorCode=00000000",
					}).then((res) => {
						window.location.href = "tel:"+res.data.operatorPhone;
					}).catch((err) =>{
						Toast({
			              message:"卖家未开通客服",
			              iconClass: 'fontSize iconfont icon-shibai'
			          	});
					});

        });
			},

			//点击跳转购物车
			vfun_goodsCall() {
        if(localStorage.getItem("memberCode") == null){
          this.$router.push({path:"/landing"})
        }else {
          this.$router.push({path: "/shopingCart"})
        }
			},

			//获取商品详情（初始化页面数据）
			goodsDetails() {
				this.axios({
					method: 'GET',
					url: "/v3/sale/goodss/" + localStorage.getItem("goodsCode") + "/queryAppData/" +  localStorage.getItem("memberCode"),
					data: {}
				}).then((res) => {
					this.saleGoodsSet = res.data;
					this.saleGoodsViewVo = res.data.list[0];
          this.saleGoodsViewVo.goodsSalePrice=parseFloat(this.saleGoodsViewVo.goodsSalePrice).toFixed(2);
					if(this.saleGoodsViewVo.isCollected == '1') {
						this.vue_collect = "已关注";
						this.vue_bb = true;
					} else {
						this.vue_collect = "关注"
						this.vue_bb = false;
					}
				}).catch((err) => {

				});
			},

      //判断当前规格值是否选中
      vfun_isSelected(key, item) {
        return this.saleGoodsViewVo.saleGoodsVoMapSkuMap[key] == item;
      },

      //判断规格值是否存在
      vfun_isSkuExit(data) {
        if(data == 0 || data == "0") {
          return true;
        } else {
          return false;
        }
      },

      //切换商品规格
      queryDataBySku(key, value, isSelected, isExisted) {
        /*
         *1.判断商品是否存在,和商品是否处于选中状态
         *2.拼接商品规格值
         *3.根据商品规格和商品 saleCode进行查询
         *4.通过goodsCode进行查询
         **/
        if(isSelected || isExisted) {
          return;
        }
        this.saleGoodsViewVo.saleGoodsVoMapSkuMap[key] = value;
        var saleGoodsSkuValueStr = "";
        for(var skuKey in this.saleGoodsViewVo.saleGoodsVoMapSkuMap) {
          saleGoodsSkuValueStr += skuKey + ":\r" + this.saleGoodsViewVo.saleGoodsVoMapSkuMap[skuKey] + ",";
        }
        saleGoodsSkuValueStr = saleGoodsSkuValueStr.substring(0, saleGoodsSkuValueStr.length - 1);
        this.axios({
          method: 'patch',
          url: "/v3/sale/goodss/" + this.saleGoodsViewVo.saleCode + "/queryDataBySku",
          data: {
            "goodsSkuValue": saleGoodsSkuValueStr,
          }
        }).then((res) => {
          if(res.data != null && res.data != undefined && res.data != "") {
            localStorage.setItem("goodsCode", res.data.goodsCode);
            this.goodsDetails();
          }
        }).catch((err) => {

        });
      },

      //判断商品是否已关注
      vue_isCollected() {
        if(this.saleGoodsViewVo.isCollected == '1') {
          this.basicCollect_delete();
        } else {
          this.basicCollect_save();
        }
      },

      //将商品加入关注
      basicCollect_save() {
        if(localStorage.getItem("memberCode") == null){
          this.$router.push({path:"/landing"})
        }else {
          this.axios({
            method: 'POST',
            url: "/v3/basic/collects",
            data: {
              "dataType": "1",
              "fromTable": "saleGoods",
              "fromCode": this.saleGoodsViewVo.goodsCode,
            }
          }).then((res) => {
            this.goodsDetails();
            this.vue_collect = '已关注';
            this.vue_bb = true;
            Toast({
              message: '已关注',
              iconClass: 'fontSize iconfont icon-chenggong'
            });
          }).catch((err) => {
            Toast({
              message: err.response.data,
              iconClass: 'fontSize iconfont icon-shibai'
            });
          });
        }
      },

      //商品取消关注
      basicCollect_delete() {
        if(localStorage.getItem("memberCode") == null){
          this.$router.push({path:"/landing"})
        }else {
          this.axios({
            method: 'DELETE',
            url: "/v3/basic/collects/saleGoods/" + this.saleGoodsViewVo.goodsCode,
            data: {}
          }).then((res) => {
            this.goodsDetails();
            this.vue_collect = '关注';
            this.vue_bb = false;
            Toast({
              message: '已取消关注',
              iconClass: 'fontSize iconfont icon-chenggong'
            });

          }).catch((err) => {
            Toast({
              message: err.response.data,
              iconClass: 'fontSize iconfont icon-shibai'
            });
          });
        }
      },

      //商品加入购物车
      save(){
        if(localStorage.getItem("memberCode") == null){
          this.$router.push({path:"/landing"})
        }else {
          this.axios({
            method: 'POST',
            url: "/v3/sale/cartGoodss",
            data: {
              "goodsCode": this.saleGoodsViewVo.goodsCode,
              "goodsBuyNum": this.goodsNum
            }
          }).then((res) => {
            Toast({
              message: '添加成功',
              iconClass: 'fontSize iconfont icon-chenggong'
            });
            this.popupVisible = false;
            this.vFun_badge_cart();
            this.$router.push({path:"/shopingCart"})
          }).catch((err) => {
            Toast({
              message: err.response.data,
              iconClass: 'fontSize iconfont icon-shibai'
            });
          });
        }
      },

      //返回上个页面
      vfun_back() {
          history.back();
      },

      //关闭（分享）弹出框
      closeShow_share(){
        this.shareShow = false;
      },

      //点击（分享）按钮
      extendBtn(item,index){
        this.shareShow = true;
      },
		},

		created(){
			this.vFun_badge_cart();  //请求badge数据
		},

		mounted() {
			this.goodsDetails();
		},

		activated(){
      this.goodsCode = localStorage.getItem("goodsCode");
			this.vFun_badge_cart();  //请求badge数据
			this.goodsCode = localStorage.getItem("goodsCode");
			this.goodsDetails();
			this.axios({
				method: 'GET',
				url: "/v3/basic/members/" + localStorage.getItem("memberCode"),
				data: {}
			}).then((res) => {
				this.BasicMemberAndMemberOperatorData = JSON.parse(JSON.stringify(res.data));
			}).catch((err) => {

			});
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h1,
	h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .5s
	}

	.fade-enter,
	.fade-leave-to
	/* .fade-leave-active in <2.1.8 */

	{
		opacity: 0
	}

	.index {
		box-sizing: border-box;
    margin-bottom: 1.6rem;
	}

	.section {
		margin-top: 1.2rem;
		height: 9rem;
	}

	.sree {
		width: 100%;
		height: 1.2rem;
		background: url(../../assets/img/bg.jpg);
		background-size: auto 100%;
		color: #fff;
		z-index: 100;
		border-bottom: 1px solid #ccc;
		position: fixed;
		top: 0;
		width: 100%;
		display: -webkit-box;
	}

	.sree .sreinput {
		line-height: 0.6rem;
		background: #fff;
		-webkit-box-flex: 1;
		border-radius: 100px;
		height: 0.6rem;
		display: -webkit-box;
	}

	.sreinput input {
		display: block;
		border: 0;
		height: 0.8rem;
		margin-top: 1px;
		box-sizing: border-box;
		-webkit-box-flex: 1;
		border-radius: 5px;
		font-size: 14px;
		text-indent: 10px;
		border: 1px solid #ccc;
	}

	.sree div {
		margin-top: 0.2rem;
	}

	.sree div em {
		display: block;
		color: #666;
		font-size: 25px;
		margin-left: 3%;
		line-height: 0.98rem;
	}

	.logo {
		padding: 0 2%;
		font-size: 25px;
		line-height: 0.8rem;
	}

	.land {
		padding: 0 2%;
		text-align: center;
		font-size: 25px;
		line-height: 0.8rem;
	}

	.land em {
		font-size: 20px;
	}

	.goods-th {
		font-size: 14px;
		font-weight: bold;
	}

	.goodsCode {
		font-size: 13px;
		color: #b0b0b0;
	}

	.goods-text {
		padding: 0.15rem 0.3rem;
		padding-bottom: 1.5rem;
	}

	.goods-text>p {
		line-height: 0.8rem;
	}

	.goods-pice {
		overflow: hidden;
		padding-top: 0.2rem;
		padding-bottom: 0.15rem;
		border-bottom: 1px solid #e0e0e0;
	}

	.goods-pice span:first-child {
		font-size: 18px;
		color: #D50B0A;
		/*float: left;*/
		margin-right: 0.2rem;
	}

	.goods-pice span:last-child {
		font-size: 13px;
		color: #b0b0b0;
		/*float: right;*/
	}

	.goods-guige {
		font-size: 14px;
		color: #666;
		margin-top: 0.15rem;
	}

	.goods-guige p {
		line-height: 0.6rem;
	}

	.footer {
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 1.4rem;
		font-family: "微软雅黑";
		box-shadow: 0 0 5px #ccc;
		z-index: 10;
		box-sizing: border-box;
	}

	.foot-chlid {
		display: -webkit-box;
	}

	.foot-left {
		-webkit-box-flex: 1.5;
		display: -webkit-box;
		background: #fff;
		padding-top: 0rem;
		font-size: 13px;
		line-height: 1.1;
	}

  .foot-mid{
    -webkit-box-flex: 1;
    background: #e87f1e;
    text-align: center;
    line-height: 1.4rem;
    height: 1.4rem;
    font-size: 16px;
    color: #fff;
  }

	.foot-right {
		-webkit-box-flex: 1;
		background: #D50B0A;
		text-align: center;
		line-height: 1.4rem;
		height: 1.4rem;
		font-size: 16px;
		color: #fff;
	}

	.foot-left div {
		text-align: center;
		font-size: 14px;
		-webkit-box-flex: 1;
	}

	.foot-left div em {
		display: block;
		font-size: 20px;
		padding-top: 8px;
	}

	.guige {
		width: 10rem;
		/*z-index: 9999;*/
		/*top: 100%;*/
		/*top: 110%;*/
		/*height: 8rem;*/
	}

	.guige>div {
		height:auto;
		min-height:6rem;
		position: relative;
		background: #fff;
		padding-bottom:3rem;
	}

	.guige-top {
		height: 2.2rem;
		border-bottom: 1px solid #ccc;
	}

	.top-img {
		width: 90%;
		margin: 0 auto;
	}

	.top-img img {
		float: left;
		border-radius: 5px;
		width: 2.4rem;
		height: 2.4rem;
		position: relative;
		top: -0.7rem;
	}

	.top-img div {
		float: left;
		margin-left: 0.3rem;
		margin-top: 0.2rem;
	}

	.top-img div span {
		font-size: 16px;
		color: #D50B0A;
	}

	.top-img div p {
		font-size: 14px;
		color: #888;
		margin-top: 0.3rem;
	}

	.guige-xunze {
		width: 90%;
		margin: 0 auto;
	}

	.guige-xunze div:last-child {
		font-size: 14px;
	}

	.guige-xunze>div {
		margin-top: 0.3rem!important;
	}

	.guige-xunze a {
		display: inline-block;
		height: 0.8rem;
		border: 1px solid #ccc;
		margin-right: 0.5rem;
		border-radius: 4px;
		text-align: center;
		line-height: 0.8rem;
		font-size: 14px;
		margin-top: 0.3rem;
		color: #565656!important;
		padding: 0 0.15rem;
	}

	.guige-xunze h1 {
		display: block;
		clear: both;
		margin-top: 0.6rem;
		margin-bottom: 0.1rem;
		font-size: 14px;
	}

	.guige-ok {
		display: block;
		position: absolute;
		bottom: 1%;
		width: 98%;
		background: #D50B0A;
		height: 1.4rem;
		margin-left: 1%;
		color: #fff;
		text-align: center;
		line-height: 1.4rem;
		font-size: 16px;
	}

	.active {
		border-color: #D50B0A!important;
		color: #D50B0A!important;
	}

	.activehui {
		border-color: #ccc!important;
		color: #ccc!important;
	}

	.activeConllect {
		color: #D50B0A;
	}

	.activeConllect em {
		color: #D50B0A;
	}

	.goodsDesc p img {
		width: 10rem!important;
	}

	.goodsDesc-box {
		border-top: 0.5rem solid #e0e0e0;
	}

	.guigeon {
		position: absolute;
		top: 0.1rem;
		right: 0.2rem;
	}
	/* start 徽章 */

	.badge {
		position: relative;
	}

	.badge>i {
		position: absolute;
		top: .1rem;
		left: 1rem;
		padding: 2px 4px;
		background: red;
		border-radius: 3px;
		font-size: 0.2rem;
		line-height: 1;
		color: #fff;
	}

  .goodsDesc-box .goodsDesTxt{
    float: left;
    width: 50%;
    text-align: center;
  }
  .goodsDesc-box .goodsDesc{
    padding: .1rem;
  }
  .activeRed{
    color: #d50b0a;
    border-bottom: 2px solid #d50b0a;
    height: 1rem;
    line-height: 1rem;
    padding: 0 0.2rem;
    padding-bottom: .2rem;

  }
	/* end 徽章 */
</style>
